<template>
  <div class="box">
    <van-nav-bar
      title="H币提现"
      right-text="提现记录"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
      style="--van-nav-bar-text-color: black; font-size: 10px"
    />
    <div class="txsxsj">
      <div class="jtsjss">
        <van-field
          v-model="fieldValue"
          is-link
          readonly
          label="到账银行卡"
          placeholder="选择银行"
          @click="showPicker = true"
        />
        <van-popup v-model:show="showPicker" round position="bottom">
          <van-picker :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
        </van-popup>
        <p style="margin: 12px">提现金额</p>
        <div class="currency-display">
          <!-- 货币符号 -->
          <span class="currency-symbol">￥</span>
          <!-- 输入框，绑定到currencyValue变量 -->
          <input type="number" class="currency-input" v-model.number="currencyValue" />
        </div>
        <van-checkbox-group v-model="checked" shape="square">
          <van-checkbox icon-size="12px" style="font-size: 12px; margin: 7px"
            >全部提现。{{ totalHCoinsFromRoute }}H币,可提现{{ totaly }}元。</van-checkbox
          >
        </van-checkbox-group>
        <van-button
          @click="txgcty"
          type="primary"
          style="width: 90%; height: 30px; margin: 50px 14px 14px 14px"
          >提现</van-button
        >
      </div>
    </div>
  </div>
</template>
<script>
import { showToast } from 'vant'
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
export default {
  setup() {
    const value = ref('')
    const onClickLeft = () => history.back()
    const columns = [
      { text: '中国农业银行', value: 'Hangzhou' },
      { text: '中国工商银行', value: 'Ningbo' },
      { text: '中国银行', value: 'Wenzhou' },
      { text: '中国建设银行', value: 'Shaoxing' },
      { text: '交通银行', value: 'Huzhou' },
      { text: '中国邮政储蓄银行', value: 'Huzhou' }
    ]
    const fieldValue = ref('')
    const showPicker = ref(false)
    const onConfirm = ({ selectedOptions }) => {
      showPicker.value = false
      fieldValue.value = selectedOptions[0].text
    }
    const checked = ref(['a', 'b'])
    const route = useRoute()
    //传过来的剩余的H币
    const totalHCoinsFromRoute = route.query.totalHCoins
    //传过来的剩余多少钱
    const totaly = totalHCoinsFromRoute / 10
    return {
      onClickLeft,
      columns,
      onConfirm,
      fieldValue,
      showPicker,
      value,
      currencyValue: '',
      checked,
      totalHCoinsFromRoute,
      totaly
    }
  },
  methods: {
  //提现过程
    txgcty() {
      if (this.currencyValue > this.totaly) {
        showToast('H币不足，无法提现')
        return
      }
      // 将totaly作为查询参数传递到/withprocess路由
      this.$router.push({
        path: '/withprocess',
        query: { totaly: this.currencyValue, bankCard: this.fieldValue }
      })
    },
    //提现记录
    onClickRight() {
      this.$router.push({
        path: '/withdrecord',
      })
    }
  }
}
</script>
<style scoped >
.box {
  background-color: #f2f2f2;
}
::v-deep .van-nav-bar__title {
  color: #000;
}
/* 修改左侧箭头颜色 */
::v-deep .van-nav-bar .van-icon {
  color: black;
}
.txsxsj {
  width: 100%;
  height: 100%;
  margin-top: 5px;
  background-color: white;
  position: relative;
}
.jtsjss {
  width: 80%;
  height: 300px;
  position: absolute;
  background-color: #f2f2f2;
  margin: 40px 37px 0px 37px;
  border-radius: 5px;
}
.srklx {
  width: 100%;
  height: 80px;
  float: left;
  margin-top: 5px;
}
.currency-display {
  width: 100%;
  display: flex; /* 使用Flexbox来对齐元素 */
  align-items: center; /* 垂直居中 */
  border-bottom: 1px solid #fff;
}

.currency-symbol {
  margin-right: 8px; /* 在符号和输入框之间添加一些空间 */
  font-size: 50px; /* 根据需要调整字体大小 */
  color: black; /* 货币符号颜色 */
}

.currency-input {
  width: 100px;
  font-size: 40px; /* 与货币符号字体大小一致 */
  text-align: center; /* 文本居中 */
  border: none;
  color: #3087ea;
  background-color: #f2f2f2;
}
</style>